<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        /* 一些 reset css 代码 */
            html, body, ul, li{
              padding: 0;
              margin: 0;
            }
            body{
          
             min-height: 100vh;overflow: hidden;
          
           
            }
            #carousel, #carousel ul, #carousel li  {
                 
              position: relative;
            }
          .pane1,.pane2, .pane3, .pane4, .pane5, .pane6{
            margin: 0 auto;
            text-align: center;
           
             overflow: hidden;
           }
           .img{ 
            margin: 0 auto;
            margin-top: 10px;
            padding: 10px;
            width: 90%;
            border-radius: 8px;
            background: #fff;
            max-width: 900px;
            max-height: 72vh;
            text-align: center;
          
           }img{
            max-height: 70vh;
          }
           @media screen and (max-width: 450px) {
             .img{ 
            margin: 0 auto;
            margin-top: 10px;
            padding: 10px;
            width: 90%;
            border-radius: 8px;
            background: #fff;
            max-width: 900px;
            max-height: 53vh;
            text-align: center;
          
           }
           img{
            max-height: 50vh;
          }
          }
           .img img{
              box-shadow:0 0 30px blue inset;
                      -webkit-box-shadow:0 0 30px blue inset;
                      -moz-box-shadow:0 0 30px blue inset;
                      -o-box-shadow:0 0 30px blue inset;
            width:100%;
           
            border-radius: 8px;
          
           }
            #carousel {
          
              background: silver;
              overflow: hidden;
              width:100%;
              padding:0px 50px 0px 0px;
              /* backface-visibility 的意思是在对元素进行变换时，如果元素的“正面”看不到了（比如使用 rotate 时），那么就隐藏整个元素
                 这在处理flip这样的翻转特效时有用。 */
              -webkit-backface-visibility: hidden;
              -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
              /* preserve-3d 指定元素的子元素应该在3D空间中进行定位 */
              -webkit-transform-style: preserve-3d;
            }
          
            /* 增加一个额外的动画样式，在切换版面时使用
               使用CSS动画能在移动设备中获得比较好的性能 */
            #carousel ul.animate {
              -webkit-transition: all .3s;
            }
          
            #carousel ul {
              -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
              overflow: hidden;
              -webkit-backface-visibility: hidden;
              -webkit-transform-style: preserve-3d;
            }
          
            #carousel ul {
              box-shadow: 0 0 20px rgba(0,0,0,.2);
              position: relative;
            }
            #carousel li {
              float: left;
              overflow: hidden;
              -webkit-transform-style: preserve-3d;
              -webkit-transform: translate3d(0,0,0);
            }
          
            #carousel li h2 {
              color: #fff;
              font-size: 30px;
              text-align: center;
              /* 设置li中元素的position为absolute，脱离文档流，
                 因为li本身进行了浮动，而其内又没有在流中的元素，
                 因此可以实现在初始化的时候先隐藏所有的li元素 */
              position: absolute;
              top: 40%;
              left: 0;
              width: 100%;
              text-shadow: -1px -1px 0 rgba(0,0,0,.2);
            }
            /* 加上一些背景色 */
            #carousel li.pane1 { background: #9fe1e7;  min-height: 100vh;overflow: hidden;  }
            #carousel li.pane2 { background: #4986e7;  min-height: 100vh;overflow: hidden;}
            #carousel li.pane3 { background: #42d692;  min-height: 100vh;overflow: hidden;}
            #carousel li.pane4 { background: #cd74e6;  min-height: 100vh;overflow: hidden;}
            #carousel li.pane5 { background: #42d692;  min-height: 100vh;overflow: hidden; }
            #map-container{
                  background: #ccc;
                  width: 100%;
                  height: 18vh; 
               
          }
          
            </style>
    <script type="text/javascript">
        function right() {
            $("#target").css("transform", "translate3d(-80%, 0px, 0px) scale3d(1, 1, 1)")
            return;
        }
    </script>
</head>

<body>
    <div data-role="page" class="message" id="pageone" data-transition="slide" data-direction="reverse">

        <div data-role="panel" class="message" id="revealPanel" style="background:#020202;color: blanchedalmond"
            data-display="reveal">
            <p>已打卡127天</p>
            <a href="mine.html" target="_top"><img src="images/zzu.png"><span style="padding:10px;color: orange">Frank</span></a><br>
            <hr />
            <span>☆☆☆☆☆</span><br>
            <span>zookeeper...</span>
            <div>
                <hr />
                <ul data-role="listview" style="background:#666666;">
                    <li><a href="mine.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的信息</a></li>
                    <li><a href="theme.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的专题</a></li>
                    <li><a href="fav.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的收藏</a></li>
                    <li><a href="album.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的相册</a></li>
                    <li><a href="edit.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">修改信息</a></li>
                    <hr />
                    <li><a href="location.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的地址</a></li>
                    <li><a href="shop.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">商城</a></li>

                </ul>
                <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power" style="position: absolute;background: #ccc; bottom: 0%;width: 80%">注销</button>
            </div>
        </div>

        <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right" style="background:#020202;color: blanchedalmond">
            <h2>超级爬虫，搜你想要</h2>
            <form class="ui-filterable">
                <input id="myFilter" data-type="search" placeholder="根据名称搜索..">
            </form>
            <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">

                <li>
                    <a href="others.html" target="_top">zookeeper8464</a>
                </li>
                <li>
                    <a href="mine.html" target="_top">未闻花名</a>
                </li>
            </ul>
        </div>

        <div data-role="header" class="ui-btn ui-btn-b">
            <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
            <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
            <p align="center"> 小黑书</p>
        </div>
        <div data-role="main" class="ui-content"><a href="#overlayPanel" class="ui-btn">搜索</a>
            <div id="map-container" style="">
                <div id="te">
                    请允许获取地理位置
                </div>
            </div>

            <button>我的相册</button>
            <div id="carousel">
                <ul id="target">
                    <li class="pane1">
                        <div class="img">
                            <img src="./image/sun01.jpg">
                        </div>

                    </li>
                    <li class="pane2">
                        <div class="img">
                            <img src="./image/sun02.jpg">
                        </div>
                    </li>
                    <li class="pane3">

                        <div class="img">
                            <img src="./image/sun03.jpg">
                        </div>
                    </li>
                    <li class="pane4">
                        <div class="img">
                            <img src="./image/sun04.jpg">
                        </div>
                    </li>
                    <li class="pane5">
                        <div class="img">
                            <img src="./image/wechat.png">
                        </div>
                    </li>

                </ul>
            </div>
        </div>

        <div data-role="page" id="pagetwo" data-theme="b">
            <div data-role="header" data-position="fixed" data-fullscreen="true">
                <h1>欢迎来到我的主页</h1>
            </div>
            <div data-role="main" class="ui-content">
                <a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a>


            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="true">
                <h1>底部文本</h1>
            </div>
        </div>


        <div data-role="page" id="class-page">

            <div data-role="content">
                <ul data-role="listview" id="listview2">
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                </ul>
            </div>

        </div>
        <div id="footer" data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#" data-icon="comment" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('easy.html')">
                            小黑书</a>
                    </li>
                    <li>
                        <a href="user.html" data-icon="user" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('friends.html')">
                            好友</a>
                    </li>
                    <li>
                        <a href="#" data-icon="star" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('active.html')">动态</a>
                    </li>
                </ul>
            </div>
        </div>
</body>

</html>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xSuV1tVNmSgm9Ge6Nh1eXq5Lrcm01gVu"></script>
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/carousel.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
    var carousel = new Carousel("#carousel")
    carousel.init()
    var name = localStorage.getItem("name");
    $("#text").append("欢迎:" + name);
</script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("map-container"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(113.669104, 34.787808); //定义一个中心点坐标
        map.centerAndZoom(point, 18); //设定地图的中心点和坐标并将地图显示在地图容器中
        var mkr = new BMap.Marker(point);
        map.addOverlay(mkr);
        window.map = map; //将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard(); //启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);

    }


    initMap(); //创建和初始化地图
</script>